<html>

<head>
<title>Peaksight - Visualization</title>

<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<link rel="stylesheet" type="text/css" href="css/visual.css"></link>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />
<!-- For the dialog css -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<!-- JQuery -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<!-- Charts libraries -->
<script language="javascript" type="text/javascript" src="js/PlayGraph/Data.js"></script>
<script language="javascript" type="text/javascript" src="js/PlayGraph/Shape.js"></script>
<script language="javascript" type="text/javascript" src="js/PlayGraph/SimpleChart.js"></script>
<script language="javascript" type="text/javascript" src="js/PlayGraph/MirrorChart.js"></script>

<!-- To load Visualization -->
<script language="javascript" type="text/javascript" src="js/visualization.js"></script>
<script language="javascript" type="text/javascript" src="js/dateManipulation.js"></script>
<script language="javascript" type="text/javascript" src="js/filter.js"></script>

</head>

<script type="application/javascript">  
//define some data
var chart; 
var filterchart;
// variables which contains data about commits, emails and issues
var commitList;
var emailList;
var issueList;
var filterCommitList;
var filterEmailList;
var filterIssueList;
var datatime;

// variables that contains data about couchdb address and database
var couchdb;
var project;

var imgCommits = "img/commits-back.png";
var imgEmails = "img/emails-back.png";

function manipulateChart(){
	var text = document.getElementById("manipulator");
	eval(text.value);
}
</script>  

<!-- Data from couchdb -->
<script type="text/javascript" >
String.prototype.trim=function(){return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');};

function initialize() {
	
	//Load data
	c = document.getElementById('commits');
	commitList = JSON.parse(c.innerHTML);	
	e = document.getElementById('emails');
	emailList = JSON.parse(e.innerText);	
	iss = document.getElementById('issues');
	issueList = JSON.parse(iss.innerHTML);	
	cdb = document.getElementById('couchdb');
	couchdb = (cdb.textContent || cdb.innerText).trim();
	pr = document.getElementById('project');
	project = (pr.textContent || pr.innerText).trim();
	tm = document.getElementById('time')
	datatime = (tm.textContent || tm.innerText).trim();
	
	c2 = document.getElementById('filter_commits');
	filterCommitList = JSON.parse(c2.innerHTML);
	e2 = document.getElementById('filter_emails');
	filterEmailList = JSON.parse(e2.innerText);	
	iss2 = document.getElementById('filter_issues');
	filterIssueList = JSON.parse(iss2.innerHTML);	
	if(filterCommitList.length==0){
		filterCommitList=commitList;
	}
	if(filterEmailList.length==0){
		filterEmailList=emailList;
	}
	if(filterIssueList.length==0){
		filterIssueList=issueList;
	}
	
	//function to hide/show hidden div
	$(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
	
	//draw chart
	drawChart()
	drawFilterChart()
}



/**
 * Function to add filters to the table
 * type is "commit", "email" or "issue"
 */
function addFilter(type){
	if(type=="commit"){
		var form = document.getElementById("commitsform");
	}else if(type=="email"){
		var form = document.getElementById("emailsform");
	}else if(type=="issue"){
		var form = document.getElementById("issuesform");
	}
	
	var key = form.elements["key"].value;
	var regex = form.elements["regex"].value;
	
	addRow("filter", type, key, regex);
}

/**
 * Utility function to get the data for a specific time
 * given the form
 */
function getDataForTime(form){
	var params = {'couchdb':couchdb, 'database':project}

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }
    document.body.appendChild(form);
    form.submit();
}

/**
 * Get the data divided by month
 */
function getMonthData(){
	method = "post"; 
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", "visualization");   
    getDataForTime(form);
}

/**
 * Get the data divided by year
 */
function getYearData(){
	method = "post"; 
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", "visualizationYear");   
    getDataForTime(form);
}

/**
 * Get the data divided by day
 */
function getDayData(){
	method = "post"; 
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", "visualizationDay");   
    getDataForTime(form);
}
</script>

<body onload="initialize()">

<header>
<div>
<a href="index.html"><img src="img/peaksight.png" /><h1>Peaksight</h1></a>
</div>
</header>

<section class="projectTitle">
	<article>${project}</article>
	<aside>
		<button id="year" onclick="getYearData()">Year</button><button id="month" onclick="getMonthData()">Month</button><button id="day" onclick="getDayData()">Day</button>
	</aside>
</section>

<h3>Full visualization</h3>
<div class="chart-container">
<img src="img/left-arrow.png" onclick="moveChartToLeft(chart)"/>
<div class="chart">
<canvas id="canvas" width="1100" height="550"></canvas>  
</div>
<img src="img/right-arrow.png" onclick="moveChartToRight(chart)"/>
</div>

<h3>Filtered visualization</h3>
<div class="chart-container">
<img src="img/left-arrow.png" onclick="moveChartToLeft(filterchart)"/>
<div class="chart">
<canvas id="filter-canvas" width="1100" height="550"></canvas>  
</div>
<img src="img/right-arrow.png" onclick="moveChartToRight(filterchart)"/>
</div>

<!--
<section>
  <article>
  <textarea id="manipulator" rows="8" cols="50">
  </textarea> <br />
  <button type="button" onclick="manipulateChart()">Evaluate</button> 
  </article> 
  <aside>
  	<h3> Example</h3>
  	chart.clear();
  	<br />
	chart.setShowSeries(["commits","emails"])
	<br />
	chart.drawChart([0, 27]);  
  </aside>
  </section>
-->

<section>
	<a href="#" class="show_hide"><div class="label">Filter</div></a>
<div class="slidingDiv">
<!-- Forms to add filters -->
<table>
	<tr>
<form id="commitsform" name="commits" action="" method="GET">
	<td>Commits: </td>
	<td><select name="key">
	<option value="author">author</option>
		<option value="committer">commiter</option>
		<option value="logMessage">log message</option>
	</select> </td>
	<td><input name="regex" type="text" /></td> <td><input type="button" value="Add" onClick="addFilter('commit')" /></td>
</form> 
</tr>
<tr>
<form id="emailsform" name="emails" action="" method="GET">
	<td>Emails: </td>
	<td><select name="key">
		<option value="sender">sender</option>
		<option value="subject">subject</option>
	</select> </td>
	<td><input name="regex" type="text" /></td> <td><input type="button" value="Add" onClick="addFilter('email')" /></td>
</form> 
</tr>
<tr>
<form id="issuesform" name="issues" action="" method="GET">
	<td>Issues: </td>
	<td><select name="key">
		<option value="author">author</option>
		<option value="summary">summary</option>
	</select> </td>
	<td><input name="regex" type="text" /></td> <td><input type="button" value="Add" onClick="addFilter('issue')" /></td>
</form> 
</tr>
</table>

<!-- List of filters -->
<table class="filters" id="filter">
	<tr><th>#</th><th>Type</th><th>Key</th><th>Expression</th></tr>
</table>

<!-- Buttons -->
<div class="buttons">
<button id="apply" onclick="applyFilters('filter')">Apply</button>
<button id="clear" onclick="clearTable('filter')">Clear</button>
</div>
</div>
</section>

<div class="hidden" id="couchdb">
	${couchdb}
</div>
<div class="hidden" id="project">
	${project}
</div>
<div class="hidden" id="time">
	${time}
</div>
<div class="hidden" id="commits">
	${commits}
</div>
<div class="hidden" id="emails">
	${emails}
</div>
<div class="hidden" id="issues">
	${issues}
</div>

<div class="hidden" id="filter_commits">
	${filter_commits}
</div>
<div class="hidden" id="filter_emails">
	${filter_emails}
</div>
<div class="hidden" id="filter_issues">
	${filter_issues}
</div>

</body>
</html>